<template>
    <tm-app color="#fff">
        <view class="welcome">
            <image class="bg-image" :src="bg_image" mode="widthFix"></image>
            <tm-text :font-size="56" _class="text-weight-b" color="#333333" label="注册"></tm-text>
            <tm-text class="mt-2" :font-size="36" color="#444444" label="您好，欢迎来到灵犀易道"></tm-text>
        </view>
        <view class="form-container">
            <tm-input v-model="loginInfo.phonenumber" :height="92" showClear placeholder="请输入手机号"></tm-input>
            <tm-input v-model="loginInfo.smsCode" :height="92" :margin="[0, 40]" placeholder="请输入短信验证码">
                <template v-slot:right>
                    <tm-text @click="handleSendSms" :font-size="32" color="#A37C3D" :label="btnCodeText"></tm-text>
                </template>
            </tm-input>
            <tm-input v-model="loginInfo.invitationCode" :margin="[0, 40]" :height="92" showClear
                placeholder="请输入邀请码"></tm-input>
            <view class="auth"><span>已有账号？</span><span class="color" @click.stop="navigateTo(pageLink.auth)">去登录></span>
            </view>
            <tm-checkbox v-model="protocolChecked" class="protocol" :round="25" :size="26" :fontSize="24">
                <view class="protocol-text">
                    <span>我已阅读并同意</span>
                    <span class="color" @click.stop="navigateTo(pageLink.protocolUser)">《用户协议》</span>
                    <span>和</span>
                    <span class="color" @click.stop="navigateTo(pageLink.privacy)">《隐私协议》</span>
                    <span>并授权巴星技术(成都)有限公司使用该账号进行信息管理</span>
                </view>
            </tm-checkbox>
            <view class="login">
                <ImageButton @click="handleLogin" class="login-btn" :image="login_btn">
                    <tm-text :font-size="48" color="#FFFFFF" label="注册"></tm-text>
                </ImageButton>
            </view>
        </view>
    </tm-app>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import bg_image from '../../static/assets/images/auth/bg.png'
import login_btn from '../../static/assets/images/auth/login_btn.png'
import useSmsCode from '@/hooks/useSmsCode';
import ImageButton from '@/components/ImageButton/index.vue';
import { useUserStore } from '@/stores/user.ts'
import { pageLink } from '@/constants/link.ts'
import { navigateTo } from '@/utils/index.ts'

const userStore = useUserStore();

const { btnCodeText,
    status,
    changeStatus } = useSmsCode(60);

const loginInfo = reactive({
    phonenumber: '',
    smsCode: '',
    invitationCode: ''
});

const protocolChecked = ref(false);

const handleSendSms = async () => {
    if (status.value) return;
    if (!loginInfo.phonenumber) {
        uni.showToast({ title: '请输入手机号', icon: 'none' });
        return
    }
    try {
        await userStore.sendSms({
            phonenumber: loginInfo.phonenumber,
        });
        changeStatus();
    } catch (error) {
        console.log(error);
    }
}

const handleLogin = () => {
    if (!loginInfo.phonenumber) {
        uni.showToast({ title: '请输入手机号', icon: 'none' });
        return
    }
    if (!loginInfo.smsCode) {
        uni.showToast({ title: '请输入验证码', icon: 'none' });
        return
    }
    if (!loginInfo.invitationCode) {
        uni.showToast({ title: '请输入邀请码', icon: 'none' });
        return
    }
    if (!protocolChecked.value) {
        uni.showToast({ title: '请勾选协议', icon: 'none' });
        return
    }
    userStore.register(loginInfo);
}
</script>

<style lang="less" scoped>
.app {
    padding-top: var(--status-bar-height);
}

.welcome {
    height: 380rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 48rpx;
    margin-top: 8rpx;
    position: relative;
    z-index: 0;

    .bg-image {
        position: absolute;
        z-index: 0;
        left: 0;
        top: 0;
        bottom: -1;
    }
}

.form-container {
    padding: 0 48rpx;
    margin-top: -20rpx;

    .auth {
        display: flex;
        justify-content: flex-end;
        font-size: 24rpx;
        margin-bottom: 32rpx;
        color: #666666;

        .color {
            color: #A37C3D;
        }
    }

    .protocol {
        margin-top: -10rpx;

        :deep(.checkbox-container) {
            align-items: flex-start !important;

            .selector {
                margin: 2rpx 12rpx !important;
            }
        }
    }

    .protocol-text {
        flex-wrap: wrap;
        font-size: 24rpx;

        .color {
            color: #A37C3D;
        }
    }
}

.login {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60rpx;

    .login-btn {
        width: 244rpx;
        height: 234rpx;
    }
}
</style>
